<template>
  <div class="add-pets">
    <van-nav-bar
      left-text="my pets test"
      class="back-nav"
      left-arrow
      @click-left="onClickBack"
    />
    <div class="add-pets-avatar">头像上传</div>
    <div class="add-pets-group">
      <h1>基本情况</h1>
      <van-field v-model="petName" label="文本" />
      <van-cell value="内容" is-link>
        <template #title>
          <span class="custom-title">单元格</span>
        </template>
      </van-cell>
      <van-cell value="内容" is-link>
        <template #title>
          <span class="custom-title">单元格</span>
        </template>
      </van-cell>
      <van-cell value="内容" is-link>
        <template #title>
          <span class="custom-title">单元格</span>
        </template>
      </van-cell>
    </div>
    <div class="add-pets-group">
      <h1>身体情况</h1>
      <van-cell title="是否1">
        <template #value>
          <div>
            <van-tag
              plain
              type="primary"
              style="margin-right: 6px; font-size: 12px; padding: 1px 5px"
              >标签</van-tag
            >
            <van-tag plain type="primary" style="padding: 1px 5px"
              >标签</van-tag
            >
          </div>
        </template>
      </van-cell>
      <van-cell title="是否2">
        <template #value>
          <div>
            <van-tag
              color="#aaa"
              plain
              type="primary"
              style="margin-right: 6px; font-size: 12px; padding: 1px 5px"
              >标签</van-tag
            >
            <van-tag plain type="primary" style="padding: 1px 5px"
              >标签</van-tag
            >
          </div>
        </template>
      </van-cell>
      <van-cell title="是否3">
        <template #value>
          <div>
            <van-tag
              plain
              type="primary"
              style="margin-right: 6px; font-size: 12px; padding: 1px 5px"
              >标签</van-tag
            >
            <van-tag plain type="primary" style="padding: 1px 5px"
              >标签</van-tag
            >
          </div>
        </template>
      </van-cell>
      <van-radio-group direction="horizontal" v-model="checked">
        <van-radio name="1">
          <van-tag
            plain
            type="primary"
            style="margin-right: 6px; font-size: 12px; padding: 1px 5px"
            >标签</van-tag
          >
        </van-radio>
        <van-radio name="2">
          <van-tag plain type="primary" style="padding: 1px 5px"
            >标签</van-tag
          ></van-radio
        >
      </van-radio-group>
      <van-button type="primary" block style="margin-top: 20px"
        >点击添加</van-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const petName = ref<string>("");
const checked = ref<string>("1");
// 返回上一级
const onClickBack = () => {
  history.back();
};
</script>

<style lang="less" scoped>
.add-pets {
  height: 100vh;
  background-color: #fff;

  .van-hairline--bottom:after {
    border-bottom-width: 0;
  }

  .van-cell {
    padding: 10px 14px;
  }

  &-group {
    padding: 12px 20px;
  }
}
</style>
